<template>
  <view class="container">
    <u-tabs-swiper
      ref="uTabs"
      :fontSize="tabOptions['font-size']"
      :activeColor="tabOptions['active-color']"
      :inactiveColor="tabOptions['inactive-color']"
      :barWidth="tabOptions['bar-width']"
      :bgColor="tabOptions['bg-color']"
      :gutter="tabOptions.gutter"
      :list="tabList"
      :current="currentMain"
      @change="tabsMainChange"
      :is-scroll="false"
      swiperWidth="750"
    />
    <swiper class="swiper-box" :current="currentMain" @transition="transition" @animationfinish="animationfinish">
      <!-- 招生进度条 -->
      <swiper-item class="swiper-item">
        <scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom">
          <view class="progress">
            <view class="progress-item" v-for="(item, index) in processList" :key="index">
              <view class="rank-tag">TOP{{ index + 1 }}</view>
              <view class="star">
                <view class="star-btn">点赞</view>
                <view class="star-num">
                  <text>{{ item.star }}人已点赞</text>
                </view>
              </view>
              <view class="progress-box">
                <view class="info">
                  <image
                    class="avator"
                    src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/rank_avator.png"
                    mode="scaleToFill"
                  />
                  <view class="title">{{ item.title }}</view>

                  <view class="lv lv--strong">
                    <image
                      class="lv-img"
                      src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/lv_king.png"
                      mode="scaleToFill"
                    />
                    <view class="lv-text">
                      <text>{{ level.getLevelText("strong") }}</text>
                    </view>
                  </view>
                </view>

                <view class="progress-bottom">
                  <view class="progress-info">
                    <view class="progress-info_item">
                      <text>已招生{{ item.current }}人</text>
                    </view>
                    <view class="progress-info_item">
                      <text>计划招生{{ item.current }}人</text>
                    </view>
                  </view>
                  <view class="process-main">
                    <view class="progress-bar">
                      <view
                        class="progress-bar__current"
                        :style="{ width: Math.min((item.current / item.total) * 100, 100) + '%' }"
                      >
                      </view>
                    </view>

                    <view class="progress-text">{{ parseInt((item.current / item.total) * 100) + "%" }} </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        <div class="my-info">
          <view class="progress">
            <view class="progress-item">
              <view class="rank-tag">TOP{{ myInfo.rank }}</view>
              <view class="star">
                <view class="star-btn">点赞</view>
                <view class="star-num">
                  <text>{{ myInfo.star }}人已点赞</text>
                </view>
              </view>
              <view class="progress-box">
                <view class="info">
                  <image
                    class="avator"
                    src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/rank_avator.png"
                    mode="scaleToFill"
                  />
                  <view class="title">{{ myInfo.title }}</view>

                  <view class="lv lv--strong">
                    <image
                      class="lv-img"
                      src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/lv_king.png"
                      mode="scaleToFill"
                    />
                    <view class="lv-text">
                      <text>{{ level.getLevelText("strong") }}</text>
                    </view>
                  </view>
                </view>

                <view class="progress-bottom">
                  <view class="progress-info">
                    <view class="progress-info_item">
                      <text>已招生{{ myInfo.current }}人</text>
                    </view>
                    <view class="progress-info_item">
                      <text>计划招生{{ myInfo.current }}人</text>
                    </view>
                  </view>
                  <view class="process-main">
                    <view class="progress-bar">
                      <view
                        class="progress-bar__current"
                        :style="{ width: Math.min((myInfo.current / myInfo.total) * 100, 100) + '%' }"
                      >
                      </view>
                    </view>

                    <view class="progress-text">{{ parseInt((myInfo.current / myInfo.total) * 100) + "%" }} </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </div>
      </swiper-item>
      <!-- 招生排行榜 -->
      <swiper-item class="swiper-item">
        <u-tabs-swiper
          ref="uTabs"
          :fontSize="tabOptions['font-size']"
          :activeColor="tabOptions['active-color']"
          :inactiveColor="tabOptions['inactive-color']"
          :barWidth="tabOptions['bar-width']"
          :bgColor="tabOptions['bg-color']"
          :gutter="tabOptions.gutter"
          :list="list"
          :current="current"
          @change="tabsChange"
          :is-scroll="false"
          swiperWidth="750"
        />

        <view class="rank">
          <swiper
            class="swiper-box"
            :current="swiperCurrent"
            @transition="transition"
            @animationfinish="animationfinish"
          >
            <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
              <scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom">
                <view class="top">
                  <view
                    :class="'rank-item rank-item__' + index"
                    v-for="(item, index) in topList"
                    :key="index"
                    v-if="index < 3"
                  >
                    <view :class="'tag tag' + index"> TOP{{ item.rank }} </view>
                    <image
                      class="avator"
                      src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/rank_avator.png"
                      mode="scaleToFill"
                    />
                    <view class="name">{{ item.name }}</view>
                    <view class="lv lv--strong">
                      <image
                        class="lv-img"
                        src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/lv_king.png"
                        mode="scaleToFill"
                      />
                      <view class="lv-text">
                        <text>{{ level.getLevelText("strong") }}</text>
                      </view>
                    </view>
                    <view class="num">{{ item.score }}人</view>
                    <view class="star-btn" :class="{ stared: item.stared }">
                      <text>{{ item.stared ? "已点赞" : "点赞" }}</text>
                    </view>
                    <view class="star-num">
                      <text>{{ item.star }}人已点赞</text>
                    </view>
                  </view>
                </view>
                <view class="rank-list">
                  <view class="rank-list-item" v-for="(item, index) in rankList" :key="index">
                    <view class="left">
                      <view :class="'tag tag' + index">
                        {{ item.rank }}
                      </view>
                      <image
                        class="avator"
                        src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/rank_avator.png"
                        mode="scaleToFill"
                      />
                      <view class="info">
                        <view class="name">{{ item.name }}</view>
                        <view class="lv lv--strong">
                          <image
                            class="lv-img"
                            src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/lv_king.png"
                            mode="scaleToFill"
                          />
                          <view class="lv-text">
                            <text>{{ level.getLevelText("strong") }}</text>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view class="right">
                      <view class="num">{{ item.score }}人</view>

                      <view class="star-main">
                        <view class="star-btn" :class="{ stared: item.stared }">
                          <text>{{ item.stared ? "已点赞" : "点赞" }}</text>
                        </view>
                        <view class="star-num">
                          <text>{{ item.star }}人已点赞</text>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <!-- 站位 -->
                <view style="height: 100rpx"></view>
              </scroll-view>
              <view class="my-rank_info">
                <view class="rank-list">
                  <view class="rank-list-item">
                    <view class="left">
                      <view :class="'tag tag' + index">
                        {{ myRankInfo.rank }}
                      </view>
                      <image
                        class="avator"
                        src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/rank_avator.png"
                        mode="scaleToFill"
                      />
                      <view class="info">
                        <view class="name">{{ myRankInfo.name }}</view>
                        <view class="lv lv--strong">
                          <image
                            class="lv-img"
                            src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/lv_king.png"
                            mode="scaleToFill"
                          />
                          <view class="lv-text">
                            <text>{{ level.getLevelText("strong") }}</text>
                          </view>
                        </view>
                      </view>
                    </view>
                    <view class="right">
                      <view class="num">{{ myRankInfo.score }}人</view>

                      <view class="star-main">
                        <view class="star-btn" :class="{ stared: myRankInfo.stared }">
                          <text>{{ myRankInfo.stared ? "已点赞" : "点赞" }}</text>
                        </view>
                        <view class="star-num">
                          <text>{{ myRankInfo.star }}人已点赞</text>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import level from "@/utils/level";
export default {
  data() {
    return {
      current: 0,
      swiperCurrent: 0,
      list: [
        {
          name: "总榜",
        },
        {
          name: "月榜",
        },
        {
          name: "周榜",
        },
        {
          name: "日榜",
        },
      ],
      tabList: [
        {
          name: "招生进度条",
        },
        {
          name: "招生排行榜",
        },
      ],
      currentMain: 0,
      tabOptions: {},
      level: level,
      topList: [], // 前三名
      rankList: [
        {
          rank: 1,
          name: "小橘子老师",
          score: 100,
          star: 100,
          stared: true,
        },
        {
          rank: 2,
          name: "小橘子老师",
          score: 100,
          star: 100,
          stared: false,
        },
        {
          rank: 3,
          name: "小橘子老师",
          score: 100,
          star: 100,
          stared: false,
        },
        {
          rank: 4,
          name: "小橘子老师",
          score: 100,
          star: 100,
          stared: false,
        },
        {
          rank: 5,
          name: "小橘子老师",
          score: 100,
          star: 100,
          stared: false,
        },
        {
          rank: 6,
          name: "小橘子老师",
          score: 100,
          star: 100,
          stared: false,
        },
        {
          rank: 7,
          name: "小橘子老师",
          score: 100,
          star: 100,
          stared: false,
        },
        {
          rank: 8,
          name: "小橘子老师",
          score: 100,
          star: 100,
          stared: false,
        },
        {
          rank: 9,
          name: "小橘子老师",
          score: 100,
          star: 100,
          stared: false,
        },
        {
          rank: 10,
          name: "小橘子老师",
          score: 100,
          star: 100,
          stared: false,
        },
      ],
      myRankInfo: {
        rank: 10,
        name: "王十二",
        score: 10,
        star: 100,
        stared: false,
      },
      myInfo: {
        title: "小橘子综合美学1",
        current: 80,
        total: 100,
        star: 1344,
        rank: 1,
      },
      processList: [
        {
          title: "小橘子综合美学",
          current: 80,
          total: 100,
          star: 1344,
        },
        {
          title: "甜心妈妈",
          current: 120,
          total: 100,
          star: 1344,
        },
        {
          title: "小橘子综合美学",
          current: 80,
          total: 100,
          star: 1344,
        },
        {
          title: "甜心妈妈",
          current: 120,
          total: 100,
          star: 1344,
        },
        {
          title: "小橘子综合美学",
          current: 80,
          total: 100,
          star: 1344,
        },
        {
          title: "甜心妈妈",
          current: 120,
          total: 100,
          star: 1344,
        },
      ],
    };
  },
  onShow() {
    let topList = this.rankList.slice(0, 3);
    let first = topList[0];
    let last = topList[2];
    let second = topList[1];
    this.topList = [second, first, last];
  },
  methods: {
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    tabsMainChange(index) {
      this.currentMain = index;
    },

    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  background: linear-gradient(0deg, #c1f26c 0%, #ffffff 100%);

  .rank {
    height: 100%;
  }
}

.swiper-item {
  .top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    padding: 20rpx 30rpx;

    .rank-item {
      width: 30%;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 218rpx;
      height: 375rpx;
      background: #ffffff;
      border-radius: 40rpx;

      .tag1 {
        background: linear-gradient(0deg, #f95513 0%, #ffb847 100%);
        font-size: 32rpx;
        margin-bottom: 20rpx;
      }

      .tag0 {
        background: linear-gradient(0deg, #43ea80 0%, #38f8d4 100%);
        font-size: 30rpx;
        margin-bottom: 18rpx;
      }

      .tag2 {
        background: linear-gradient(0deg, #93a5cf 0%, #b4ece9 100%);
        font-size: 30rpx;
        margin-bottom: 18rpx;
      }

      .tag {
        width: 142rpx;
        height: 47rpx;
        border-radius: 10rpx 10rpx 30rpx 30rpx;
        color: #fff;
        text-align: center;
        line-height: 47rpx;
      }

      .avator {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50rpx;
        margin-bottom: 20rpx;
      }

      .name {
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #2e2e2e;
        margin-bottom: 22rpx;
      }

      .num {
        font-family: HarmonyOS Sans SC;
        font-weight: bold;
        font-size: 35rpx;
        color: #2e2e2e;
        margin-top: 10rpx;
      }

      .star-btn {
        width: 109rpx;
        height: 36rpx;
        background: #f95513;
        font-family: HarmonyOS Sans SC;
        border-radius: 18rpx;
        font-size: 24rpx;
        color: #ffffff;
        transform: scale(0.91667);
        text-align: center;
        margin-top: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .star-btn.stared {
        background: #ffffff;
        color: #f95513;
        border: 2px solid #f95513;
      }

      .star-num {
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #c4c3c3;
        transform: scale(0.6667);
        margin-top: 4rpx;
      }
    }

    .rank-item__1 {
      width: 219rpx;
      height: 396rpx;
      background: #ffffff;
      border-radius: 40rpx;

      .tag1 {
        width: 153rpx;
        height: 50rpx;
        background: linear-gradient(0deg, #f95513 0%, #ffb847 100%);
        border-radius: 10rpx 10rpx 30rpx 30rpx;
        font-size: 32rpx;
        margin-bottom: 20rpx;
      }

      .avator {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50rpx;
        margin-bottom: 20rpx;
      }

      .name {
        font-size: 24rpx;
        color: #333;
        margin-bottom: 18rpx;
      }

      .num {
        font-family: HarmonyOS Sans SC;
        font-weight: bold;
        font-size: 38rpx;
        color: #2e2e2e;
        margin-top: 18rpx;
      }
    }
  }
}

.swiper-box {
  flex: 1;
  height: 100%;
}

.rank-list {
  height: 100%;

  margin-bottom: 100rpx;

  .rank-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14rpx 42rpx;
    width: 702rpx;
    height: 104rpx;
    background: #ffffff;
    border-radius: 20rpx;
    margin: 0 auto 20rpx auto;

    .left {
      display: flex;
      align-items: center;

      .tag {
        font-family: HarmonyOS Sans SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #c5c5cb;
        width: 36rpx;
        height: 36rpx;
      }

      .avator {
        width: 80rpx;
        height: 80rpx;
        border-radius: 40rpx;
        margin-left: 24rpx;
      }

      .info {
        margin-left: 26rpx;

        .name {
          font-size: 24rpx;
          color: #333;
          margin-bottom: 14rpx;
        }
      }
    }

    .right {
      display: flex;
      align-items: center;
      .num {
        font-family: HarmonyOS Sans SC;
        font-weight: bold;
        font-size: 30rpx;
        color: #2e2e2e;
      }

      .star-main {
        .star-btn {
          width: 109rpx;
          height: 36rpx;
          background: #f95513;
          font-family: HarmonyOS Sans SC;
          border-radius: 18rpx;
          font-size: 24rpx;
          color: #ffffff;
          transform: scale(0.91667);
          text-align: center;
          margin: 0 auto;
          margin-top: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .star-btn.stared {
          background: #ffffff;
          color: #f95513;
          border: 2px solid #f95513;
        }

        .star-num {
          font-family: HarmonyOS Sans SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #c4c3c3;
          transform: scale(0.6667);
          margin-top: 4rpx;
        }
      }
    }
  }
}

.lv {
  display: flex;
  align-items: end;
  width: 158rpx;
  height: 25rpx;
  border-radius: 12rpx;
  position: relative;

  .lv-img {
    width: 30rpx;
    height: 30rpx;
    margin-left: 14rpx;
    margin-right: 10rpx;
    border-radius: 30rpx;
  }

  .lv-text {
    font-family: HarmonyOS Sans SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
    line-height: 24rpx;
    transform: scale(0.625);
    white-space: nowrap;
    position: absolute;
    left: 20rpx;
  }
}

.lv--strong {
  background: linear-gradient(0deg, #af85d6 0%, #cc86e0 100%);
}

.lv--king {
  background: linear-gradient(0deg, #af85d6 0%, #cc86e0 100%);
}

.lv--fighter {
  background: linear-gradient(0deg, #af85d6 0%, #cc86e0 100%);
}

.progress {
  .progress-item {
    width: 702rpx;
    height: 280rpx;
    background: #ffffff;
    box-shadow: -4rpx 0rpx 19rpx 1rpx rgba(52, 52, 52, 0.15);
    border-radius: 40rpx;
    margin: 0 auto;
    position: relative;
    padding-left: 30rpx;

    .rank-tag {
      font-family: HarmonyOS Sans SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      background: linear-gradient(0deg, #f95513 0%, #ffb847 100%);
      border-radius: 10rpx 10rpx 30rpx 30rpx;
      width: 142rpx;
      height: 47rpx;
      text-align: center;
      line-height: 47rpx;
      margin-top: 20rpx;
      margin-left: 30rpx;
    }

    .star {
      // margin-top: 20rpx;
      position: absolute;
      right: 35rpx;
      top: 16rpx;

      .star-btn {
        width: 109rpx;
        height: 38rpx;
        background: #f95513;
        border-radius: 18rpx;
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #ffffff;
        text-align: center;
        line-height: 38rpx;
        align-self: center;
        margin: 0 auto;
      }

      .star-num {
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #c4c3c3;
        transform: scale(0.75);
      }
    }

    .progress-box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 200rpx;
      margin-top: 12rpx;

      .info {
        display: flex;
        align-items: center;

        .avator {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50rpx;
        }

        .title {
          font-family: HarmonyOS Sans SC;
          font-weight: bold;
          font-size: 36rpx;
          color: #2e2e2e;
          margin-left: 20rpx;
        }

        .lv {
          display: flex;
          align-items: end;
          width: 192rpx;
          height: 30rpx;
          border-radius: 12rpx;
          position: relative;
          margin-left: 20rpx;

          .lv-img {
            width: 40rpx;
            height: 40rpx;
            margin-left: 14rpx;
            margin-right: 10rpx;
            border-radius: 40rpx;
          }

          .lv-text {
            font-family: HarmonyOS Sans SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #ffffff;
            line-height: 24rpx;
            transform: scale(0.75);
            white-space: nowrap;
            position: absolute;
            left: 40rpx;
            bottom: 2rpx;
          }
        }
      }

      .progress-bottom {
        margin-top: 20rpx;

        .progress-info {
          display: flex;
          justify-content: space-between;
          width: 534rpx;

          .progress-info_item {
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #2e2e2e;
            transform: scale(0.833333);
            line-height: 20rpx;

            text {
            }
          }
        }

        .process-main {
          display: flex;
          align-items: center;
          margin-top: 14rpx;

          // justify-content: space-between;
          .progress-bar {
            width: 534rpx;
            height: 8rpx;
            background: #ffbba0;
            border-radius: 4rpx;
            position: relative;

            .progress-bar__current {
              height: 8rpx;
              background: linear-gradient(0deg, #f95513 0%, #ffb847 100%);
              border-radius: 4rpx;
              position: absolute;
              top: 0;
              left: 0;
            }
          }

          .progress-text {
            margin-left: 16rpx;
            font-family: HarmonyOS Sans SC;
            font-weight: bold;
            font-size: 36rpx;
            color: #f95513;
          }
        }
      }
    }
  }
}

.my-info {
  width: 100%;
  height: 390rpx;
  background: #ffffff;
  position: fixed;
  bottom: 0;
  box-shadow: -4rpx 0rpx 19rpx 1rpx rgba(52, 52, 52, 0.15);

  .progress {
    margin-top: 42rpx;

    .progress-item {
      background: #f95513;

      * {
        color: #fff;
      }

      .rank-tag {
        background: #fff;
        color: #f95513;
      }

      .progress-box {
        .info {
          .title {
            color: #fff;
          }

          .lv {
            .lv-text {
              color: #fff;
            }
          }
        }

        .progress-bottom {
          .process-main {
            .progress-bar {
              .progress-bar__current {
                background: #fff;
              }
            }
          }
        }
      }

      .star-btn {
        background: #fff;
        color: #f95513;
      }
    }
  }
}

.my-rank_info {
  width: 100%;
  height: 286rpx;
  background: #ffffff;
  position: fixed;
  bottom: 0;
  box-shadow: -4rpx 0rpx 19rpx 1rpx rgba(52, 52, 52, 0.15);

  .rank-list-item {
    background: #f95513;
    margin-top: 14rpx;

    // * {
    //     color: #fff;
    // }

    .left {
      .tag {
        color: #fff;
      }

      .info {
        .name {
          color: #fff;
        }

        .lv {
          .lv-text {
            color: #fff;
          }
        }
      }
    }
    .right {
      .num {
        color: #fff;
      }

      .star-btn {
        background: #fff !important;
        color: #f95513 !important;
      }
      .star-num {
        color: #fff !important;
      }
    }
  }
}
</style>
